<template>
  <!-- v-if="!isShowSeat" -->
  <div class="live_pk_container" v-if="isOpenPKWin">
    <div class="inner w100 h100 flex_colm">
      <div class="img_box flex_bt">
        <img
          @click="gobackUp(1)"
          class="cur_poi"
          style=""
          src="../assets/pk_2.png"
          alt=""
        />
        <img
          @click="closeDialog"
          class="cur_poi"
          src="../assets/pk_3.png"
          alt=""
        />
      </div>
      <div class="content_box isShowPKs" v-if="isShowPKOnlineList">
        <div class="content_box_inner_list txt_cent">
          <img src="../assets/pk_online_invit.png" alt="" />
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleSwitchLive"
          >
            <el-tab-pane
              :label="tab.label"
              :name="tab.label"
              v-for="tab in pkTab"
              :key="tab.label"
            >
            </el-tab-pane>
          </el-tabs>
          <div class="onlien_lives bs_bdb">
            <div
              class="item bs_bdb flex_bt"
              v-for="item in onLineListOb"
              :key="item.id"
            >
              <div class="pk_info flex">
                <div class="avatar_img">
                  <img
                    class="bd_radio"
                    :src="item?.userinfo?.headimgurl"
                    alt=""
                  />
                </div>
                <div class="text bs_bdb">
                  <div class="nickName flex_row">
                    <div class="fs_16">{{ item?.userinfo?.nickname }}</div>
                    <img
                      style="width: 18px; height: 18px"
                      src="../assets/sex_2.png"
                      alt=""
                    />
                  </div>
                  <div class="record fs_12">
                    <span>本周成绩：</span>
                    <span style="color: #3d9a09">
                      {{ item?.pkscore?.win }}
                    </span>
                    胜
                    <span style="color: #dc383b">{{ item?.pkscore?.lose }}</span
                    >负
                    <span style="color: #62a2f6">{{ item?.pkscore?.flat }}</span
                    >平
                  </div>
                </div>
              </div>
              <!--   v-if="store.OtherSideInfo?.joinstatus === 1" -->
              <div
                class="pk_btn bs_bdb fs_14 fff cur_poi"
                @click="initPK(item)"
              >
                发起PK
              </div>
              <!-- <div v-else
                class="un_pk_btn pk_btn bs_bdb fs_14 fff"
                @click="initPK(item)"
              >
                发起PK
              </div> -->
            </div>
          </div>
          <div class="follow_lives"></div>
        </div>
      </div>
      <div class="content_box flex_colm" v-if="!isShowPKOnlineList">
        <div class="item flex_bt">
          <div>
            <img src="../assets/pk_4.png" alt="" />
          </div>
          <div class="item_btn fff fs_12 cur_poi">我的战绩</div>
        </div>
        <div class="item_list cur_poi">
          <div class="vs" @click="intoPkMode(1)">
            <img src="../assets/vs_1.png" alt="" />
          </div>
          <div @click="intoPkMode(2)" class="vs">
            <img src="../assets/vs_2.png" alt="" />
          </div>
          <div @click="intoPkMode(3)" class="vs">
            <img src="../assets/vs_3.png" alt="" />
          </div>
          <div @click="intoPkMode(4)" class="vs">
            <img src="../assets/vs_4.png" alt="" />
          </div>
        </div>
        <div class="item3 flex_bt">
          <img src="../assets/pk_5.png" alt="" />
          <div class="item3_right flex cur_poi">
            <img src="../assets/pk_6.png" alt="" />
            <span class="fs_14">刷新</span>
          </div>
        </div>
        <div class="pk_list">
          <div class="pk_item" v-for="i in 3" :key="i">
            <div class="pk_item_inner flex_bt">
              <div class="pk_item_inner_seat">
                <div class="item1" v-for="i in 4" :key="i">
                  <div class="seat_box flex_colm">
                    <div class="img_box_seat bd_radio cur_poi">
                      <img
                        class="bd_radio bs_bdb"
                        src="../assets/pk_seat.png"
                        alt=""
                      />
                      <div class="vs_font txt_cent fff fs_16">vs</div>
                    </div>
                    <div class="bs_bdb txt_cent fs_10 nickName">虚拟以待</div>
                  </div>
                </div>
              </div>
              <div class="pk_item_inner_btn bs_bdb fff fs_12 cur_poi">
                立即参与
              </div>
            </div>
            <img class="title_img" src="../assets/pk_title.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <div
      v-show="isShowOneOnOneMode"
      class="dialog bs_bdb flex_colm txt_cent"
      style="height: 153px; width: 275px"
    >
      <div class="mian">请选择匹配方式</div>
      <div class="foot flex_bt">
        <div
          class="foot_btn cur_poi fs_14 bs_bdb"
          @click="handleOneOnOneMode()"
        >
          系统匹配
        </div>
        <div
          @click="handleOneOnOneMode()"
          class="cur_poi foot_btn fs_14 bs_bdb fff"
        >
          在线邀请
        </div>
      </div>
      <img
        @click="close1V1"
        class="clos_img cur_poi"
        src="../assets/pk_clos.png"
        alt=""
      />
    </div>
  </div>
  <div class="live_pk_container live_pk_container2" v-if="isShowSeatList">
    <div class="inner">
      <div class="img_box flex_bt">
        <img
          @click="gobackUp(2)"
          class="cur_poi"
          style=""
          src="../assets/pk_2.png"
          alt=""
        />
        <img
          @click="closeDialog"
          class="cur_poi"
          src="../assets/pk_3.png"
          alt=""
        />
      </div>
      <div class="title_more_pk" v-if="mappeTitleMode[pkMode]">
        <div class="fs_18 fff">{{ mappeTitleMode[pkMode].title }}</div>
        <div class="fs_10 fff" style="white-space: nowrap">
          {{ mappeTitleMode[pkMode].subTitle }}
        </div>
      </div>
      <div class="content_box pk_box">
        <div class="head_bg flex">
          <div class="item cur_poi" v-for="(item, i) in sortSeatArr" :key="i">
            <el-popover
              :visible="mapperVisible[`myVisible${i + 1}`]"
              :popper-style="popperStyle"
              placement="right"
              trigger="click"
            >
              <!-- v-if="!item?.userinfo" -->
              <div v-if="!item?.userinfo">
                <div
                  @click="toInvite(i + 1, item)"
                  class="popover_box_inner flex cur_poi"
                  style="margin-bottom: 10px"
                >
                  <img
                    class="bd_radio"
                    src="../assets/invit_big.png"
                    style="width: 25px; height: 25px"
                    alt=""
                  />
                  <div style="margin-left: 15px">邀请</div>
                </div>
                <div
                  @click="toRobSeat(i + 1)"
                  class="popover_box_inner flex cur_poi"
                >
                  <img
                    class="bd_radio"
                    src="../assets/zw_big.png"
                    style="width: 25px; height: 25px"
                    alt=""
                  />
                  <div style="margin-left: 15px">占位</div>
                </div>
              </div>
              <div class="" v-else>
                <div
                  @click="toTickOut(i + 1, item)"
                  class="popover_box_inner flex cur_poi"
                >
                  <img
                    class="bd_radio"
                    src="../assets/t_big.png"
                    style="width: 25px; height: 25px"
                    alt=""
                  />
                  <div style="margin-left: 15px">踢出</div>
                </div>
              </div>
              <template #reference>
                <div
                  @click="clickPopover(i + 1)"
                  class="bd_radio"
                  style="
                    width: 30px;
                    height: 30px;
                    background: #ffffff;
                    margin: auto;
                  "
                >
                  <img
                    class="bd_radio"
                    style="width: 100%; height: 100%"
                    v-if="item?.userinfo"
                    :src="item?.userinfo?.headimgurl"
                    alt=""
                  />
                  <img
                    v-else
                    style="width: 20px; height: 20px; margin-top: 5px"
                    src="../assets/seat_add.png"
                    alt=""
                  />
                </div>
              </template>
            </el-popover>

            <div class="fff fs_10" v-if="item">
              {{ item?.joinstatus ? item?.userinfo?.nickname : "待确认中" }}
            </div>
            <div class="fff fs_10" v-else></div>
            <div class="vs_box2" v-if="pkMode === 2 || pkMode === 4">vs</div>
            <div class="vs_box1" v-else>vs</div>
          </div>
        </div>
        <div class="foot_fun flex_bt bs_bdb">
          <div class="foot_fun_item bs_bdb fs_14 cur_poi">退出组队</div>
          <div class="foot_fun_item bs_bdb fs_14 cur_poi" @click="startPK">
            开启PK
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  nextTick,
  onBeforeMount,
  onBeforeUnmount,
  onMounted,
  ref,
  reactive,
} from "vue";
import { useCounterStore } from "../store";
import {
  onLineListApi,
  roomLiveApi,
  createPkRoomApi,
  invitLiveApi,
  enablePkApi,
} from "../http";

const mappeTitleMode = ref({
  1: "",
  2: {
    title: "全民PK 1v2",
    subTitle: "当前为1V2，人员补齐才能开始PK",
  },
  3: {
    title: "多人大乱斗",
    subTitle: "补齐到亲人数开启PK，大乱斗模式三人即可开启PK",
  },
  4: {
    title: "",
    subTitle: "",
  },
});
const mapperVisible = reactive({
  myVisible1: false,
  myVisible2: false,
  myVisible3: false,
});
const sortSeatArr = ref([{}, {}, {}]);
const store = useCounterStore();
const activeName = ref("在线主播");
const pkTab = reactive([
  {
    label: "在线主播",
    value: [],
  },
  {
    label: "关注主播",
    value: [],
  },
]);
const onLineListOb = ref([]);
const clickPopover = (val) => {
  mapperVisible[`myVisible${val}`] = true;
};
const popperStyle = ref({
  width: "20px",
  padding: "5px",
});
const isOpenPKWin = ref(false);
const isShowSeatList = ref(false);
const isShowPKOnlineList = ref(false);
const isShowOneOnOneMode = ref(false);
const currentPkMode = ref(-1);
const orderSeat = ref(1);
const recordPage = ref(1);

const gobackUp = (e) => {
  if (e == 2) {
    isOpenPKWin.value = true;
    isShowSeatList.value = false;
  }
  if (e == 1 && isShowPKOnlineList.value) {
    isShowPKOnlineList.value = false;
  }
  if (recordPage.value == 2) {
    isShowSeatList.value = true;
    recordPage.value = 1;
  }
};

const intoPkMode = (val) => {
  try {
    console.log("  orderSeat.value", orderSeat.value);
    recordPage.value = 1;
    currentPkMode.value = val;
    let res = null;
    if (currentPkMode.value === 1) {
      isShowOneOnOneMode.value = true;
      nextTick(async () => {
        let temp = {
          type: currentPkMode.value,
          roomid: Number(store.roomLiveInfo.id),
          order: orderSeat.value,
        };
        let res = await invitLiveApi(temp);
        console.log("rz2-----------------", res);
        // if (res.data.errcode===0) {
        //  pkid.value= res.data.data.pkid
        // }
      });
    } else if (currentPkMode.value === 2) {
      nextTick(async () => {
        let temp = {
          type: currentPkMode.value,
          roomid: Number(store.roomLiveInfo.id),
          order: orderSeat.value,
        };
        let res2 = await invitLiveApi(temp);
        console.log("rz2-----------------", res2);
        isShowSeatList.value = true;
      });
    } else if (currentPkMode.value === 3) {
    } else if (currentPkMode.value === 4) {
    }
  } catch (err) {
    console.log("err", err);
  }
};
const handleSwitchLive = (e) => {
  activeName.value = e.props.name;
  if (activeName.value == "关注主播") {
    onLineListOb.value = pkTab[1].value;
  } else {
    onLineListOb.value = pkTab[0].value;
  }
};
const handleOneOnOneMode = () => {
  orderSeat.value = 2;
  isShowPKOnlineList.value = true;
  isShowOneOnOneMode.value = false;
  nextTick(() => {
    getOnlineList();
  });
};
// todo
const pkMode = ref(1);
// todo
const closeDialog = (e) => {
  console.log("e", e);
  isOpenPKWin.value = false;
  isShowSeatList.value = false;
  isShowPKOnlineList.value = false;
};
const close1V1 = () => {
  currentPkMode.value = -1;
  console.log("currentPkMode.value", currentPkMode.value);
  isShowOneOnOneMode.value = false;
};
const handleOpePkWin = (e) => {
  isOpenPKWin.value = e;
  console.log("onMounted-e", e);
};

const initPK = async (val) => {
  try {
    console.log("val", val, "orderSeat.value", orderSeat.value);
    let temp = {
      type: currentPkMode.value,
      roomid: Number(store.roomLiveInfo.id),
      order: orderSeat.value,
    };
    temp["pkid"] = pid.value;
    temp["invited_roomid"] = Number(val.roominfo.id);
    let res2 = await invitLiveApi(temp);
    console.log("res2", res2);
  } catch (err) {
    console.log("err", err);
  }
  if (currentPkMode.value != 1) {
    isShowPKOnlineList.value = false;
    isShowSeatList.value = true;
  }
};
const startPK = () => {
  sortSeatArr.value;
  let data = {
    pkid: pid.value,
    time: 10,
  };
  enablePkApi(data).then(async (res) => {
    console.log("startPK-res", res);
    if (res.data.errcode === 0) {
      console.log("1.", res.data.data.pk_room_id);
    }
  });
};
const toInvite = (i, val) => {
  recordPage.value = 2;
  orderSeat.value = i;
  console.log("i", i, "val", val);
  mapperVisible[`myVisible${i}`] = false;
  isShowSeatList.value = false;

  nextTick(() => {
    getOnlineList();
    isShowPKOnlineList.value = true;
  });
};

const getOnlineList = async () => {
  let data = {
    roomid: store.roomLiveInfo.id,
    isfollow: Number(store.roomLiveInfo.follow),
    page: 1,
    limit: 5,
  };
  let res = await onLineListApi(data);
  //  = onLineListOb.value = res.data.roomlist;
  let resData = res.data.data.roomlist;
  pkTab[0].value = resData;
  pkTab[1].value = JSON.parse(JSON.stringify(resData)).filter(
    (v) => v.isfollow
  );
  onLineListOb.value = resData;
};
const pid = ref("");
const watCreateTeam = async (e) => {
  sortSeatArr.value = [{}, {}, {}];
  console.log("watCreateTeam-e", e); //userinfo.uid e.data.teamdata.teams.room1.roominfo.roomid
  pid.value = e.data.teamdata.pkid;
  let obj = e.data.teamdata.teams;

  Object.entries(obj).forEach(([key, value], index) => {
    if (
      index < sortSeatArr.value.length &&
      Object.keys(sortSeatArr.value[index]).length === 0
    ) {
      sortSeatArr.value[index] = value;
    }
  });
  if (sortSeatArr.value[0].userinfo) {
  }
  console.log("sortSeatArr.value", sortSeatArr.value);
};
onMounted(() => {
  store.mittOb.on("pkDialog", handleOpePkWin);
  store.mittOb.on("videoformatteam", watCreateTeam);
});
</script>

<style scoped lang="scss">
.live_pk_container {
  width: 385px;
  height: 615px;
  background-image: url("../assets/pk_bg_1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  bottom: 150px;
  right: 300px;
  padding: 17px;
  box-sizing: border-box;
  .inner {
    .img_box {
      img {
        width: 29px;
        height: 29px;
      }
    }

    .content_box {
      height: calc(100% - 45px - 30px);
      // todo
      min-height: 480px;
      // todo
      margin-top: 45px;
      flex: 1;
      background: #ffffff;
      border-radius: 15px;
      padding: 15px;
      box-sizing: border-box;
      // 在线主播的信息列表
      .content_box_inner_list {
        :deep(.el-tabs__content) {
          color: #6b778c;
        }
        :deep(.el-tabs__nav-wrap):after {
          background-color: #ffffff;
        }
        :deep(.el-tabs__active-bar) {
          background-color: #9f3ff4;
        }
        :deep(.el-tabs__nav) {
          width: 100%;
        }
        :deep(.el-tabs__item) {
          flex: 1;
          padding: 0 45px;
          box-sizing: border-box;
        }
        img {
          width: 180px;
          height: 30px;
        }
        // 列表
        .onlien_lives {
          height: 400px;
          overflow: auto;
          padding: 5px;

          .item {
            margin-bottom: 8px;
            box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.3);
            padding: 5px;

            border-radius: 8px;
          }
          .pk_info {
            .avatar_img {
              width: 54px;
              height: 54px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .text {
              padding-left: 9px;
              .nickName {
                align-items: center;
                img {
                  margin: 0 7px;
                }
              }
              .record {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                font-style: normal;
              }
            }
          }
          .pk_btn {
            padding: 6px 12px;
            background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
            border-radius: 50px 50px 50px 50px;
          }
          .un_pk_btn {
            background: #aaa !important;
          }
        }
      }
      .item {
        img {
          width: 117px;
          height: 17px;
        }
        .item_btn {
          background: #2179ff;
          padding: 6px 15px;
          box-sizing: border-box;
          border-radius: 25px;
        }
      }
      .item_list {
        display: flex;
        flex-wrap: wrap;
        padding: 7px 0;
        box-sizing: border-box;
        .vs {
          width: 50%;
          padding: 7.5px;
          box-sizing: border-box;
          img {
            width: 100%;
            height: 63px;
          }
        }
      }
      .item3 {
        img {
          width: 145px;
          height: 17px;
        }
        .item3_right {
          color: #999c9d;
          img {
            width: 16px;
            height: 16px;
          }
        }
      }
      .pk_list {
        flex: 1;
        overflow: auto;
        margin-top: 15px;

        .pk_item {
          position: relative;
          height: 80px;
          background: pink;
          border-radius: 10px 10px 10px 10px;
          margin: 0 0 15px 0;
          .pk_item_inner {
            padding: 20px 15px 0;
            box-sizing: border-box;
            height: 100%;
            // margin: auto 0;
            align-items: center;
            .pk_item_inner_seat > .item1:last-child {
              .vs_font {
                display: none;
              }
            }
            .pk_item_inner_seat {
              flex: 1;
              display: flex;
              .item1 {
                height: 100%;
                .seat_box {
                  justify-content: center;
                  align-items: center;
                  margin-right: 10px;

                  .img_box_seat {
                    position: relative;
                    padding: 5px;
                    box-sizing: border-box;
                    background: #ffffff;
                    width: 29px;
                    height: 29px;
                    img {
                      width: 20px;
                      height: 20px;
                    }
                  }
                  .vs_font {
                    position: absolute;
                    left: 29px;
                    top: 11px;
                    text-align: center;
                    font-family: YouSheBiaoTiHei;
                    font-style: normal;
                    text-transform: none;
                  }

                  .nickName {
                    padding-top: 5px;
                    width: 43px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    display: inline-block;
                  }
                }
                .vs_font {
                  width: 23px;
                  height: 10px;
                  font-family: YouSheBiaoTiHei;
                  font-size: 16px;
                  color: #ffffff;
                  line-height: 0px;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                }
              }
            }
            .pk_item_inner_btn {
              background: #2179ff;
              padding: 6px 12px;
              box-sizing: border-box;
              border-radius: 25px;
            }
          }
        }
        .title_img {
          width: 100px;
          height: 26px;
          position: absolute;
          top: -4px;
          left: 50%;
          transform: translate(-50%);
        }
      }
    }
  }
  .dialog {
    border-radius: 8px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 39px 26px 18px;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.3);
    background: #ffffff;
    .clos_img {
      width: 25px;
      height: 25px;
      position: absolute;
      right: 5px;
      top: 5px;
    }
    .mian {
      flex: 1;
    }
    .foot_btn:first-child {
      padding: 9px 19px;
      background: #dfefff;
      border-radius: 18px 18px 18px 18px;
      color: #219bff;
    }
    .foot_btn:last-child {
      padding: 9px 19px;
      background: radial-gradient(50% 0% at 0% 0%, #219dff 0%, #2161ff 100%);
      border-radius: 18px 18px 18px 18px;
    }
  }
}
.live_pk_container2 {
  background-image: url("../assets/pk_bg_2.png");
  .title_more_pk {
    padding-top: 8.5px;
    box-sizing: border-box;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
  }
  .pk_box {
    .foot_fun {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 384px;
      height: 65px;
      background: #ffffff;
      border-radius: 10px 10px 0 0;
      box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.4);
      padding: 0 50px;
      .foot_fun_item {
        padding: 10px 19px;
        background: #dfefff;
        border-radius: 18px 18px 18px 18px;
        color: #219bff;
      }
      .foot_fun_item:last-child {
        padding: 10px 24px;
        background: #d8d8d8;
        border-radius: 18px 18px 18px 18px;
        color: #888888;
      }
    }
    .head_bg {
      position: absolute;
      top: 65px;
      left: 50%;
      transform: translate(-50%);
      width: 300px;
      height: 57px;
      background-image: url("../assets/all_seat_bg.png");
      background-size: 100% 100%;
      background-position: 50% 50%;
      padding: 25px 20px;
      box-sizing: border-box;

      .item {
        text-align: center;
        flex: 1;
        position: relative;
        .vs_box1,
        .vs_box2 {
          position: absolute;
          left: calc(100% - 10px);
          top: 10%;
          transform: translate(-10%);
          width: 22px;
          color: transparent;
          font-family: vs;
          font-size: 16px;
          text-shadow: 4px 4px 4px rgba(71, 68, 68, 0.2);
          text-align: center;
          font-style: normal;
          text-transform: none;
          background: linear-gradient(to bottom, #f04788, #5ba9e4);
          -webkit-background-clip: text;
          font-weight: normal;
        }
        .vs_box2 {
        }
      }
      .item:last-child {
        .vs_box1 {
          display: none;
        }
      }
      .item:nth-last-child(2),
      .item:last-child {
        .vs_box2 {
          border: 1px solid pink;
          display: none;
        }
      }
    }
  }
}
</style>
